<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		 .html()     无参---功能：获取匹配元素中第一元素功能
		             有参---功能：【设置】见匹配元素集合中所有元素替换为新元素
		特点：针对 内容 + 元素			 
		 .val()		 无参---功能：表单内元素 input、select生效
		                         获取表单元素内第一个元素的内容
		             有参---功能：【设置】表单内元素 input、select生效
					            input元素直接显示 value
								select元素不是显示 value
								option 元素中的内容   用户显示
								option 元素中的value值
								必须当前的select中，option元素value值
								直接赋值，打印select元素对象名称[object Object]
		特点：针对 表单内 （表单内from元素可以包裹）元素的内容						
		 .text()    无参---功能：获取匹配元素集合中所有元素的文本内容
		            有参---功能：【设置】匹配元素集合中所有元素的文本内容替换
		特点：元素中存在内容 
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮--针对html函数--有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮--针对val函数--无参</button>
		<input type="text" value="文本框真实数据1"/>
		<input type="text" value="文本框真实数据2" placeholder="输入框显示效果[提示]"/>
		<!-- html:按钮  |下拉列表 select>option*3   需要加value -->
		<!-- jq: 点击按钮：设置下拉列表的值  |  html()函数与val()函数有参的区别 -->
		<button>按钮--针对val函数--有参</button>
		<select >
			<option value="lorem1">哈哈</option>
			<option value="lorem2">哈哈哈</option>
			<option value="lorem3">哈哈哈哈</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮--针对text函数--无参</button>
		<button class="btn2">按钮--针对text函数--有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			// 1. 找到 类名为bnt1 的按钮--点击---弹窗内容  3个p元素 的内容  无参
			// 2.找到 类名为bnt2的按钮--点击--lorem4/5/6  改为"修改文本"    有参
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			$(".btn2").click(function(){
				$("p").text("<p>lorem</p>");
			});
			
			
			//$("button").click(function(){
			//	//抓元素的第一个值   1.直接设置下拉列表中value的值
			//	$("select").val("lorem3");
			//	//抓元素的第一个值   2.给第一个值添加，设置好的内容【本身存在】
			//	var lorem=$("select").val();
			//	//[]object Object]  JavaScript中对象的默认字符串表示形态
			//	//select元素 对象  输出[object Object]
			//	//value的值：真实数据 option中值：显示数据
			//	//object  测试 无参
			//	alert("-针对val函数--有参:"+lorem);
			//});
			
			//动态效果：点击按钮，获取第一个表单元素的内容，打印出来
			//$("button").click(function(){
			//	/* 注意 js变量名不能是关键字  in是关键字 */
			//	var ins=$("input").val();
			//	alert("val()函数无参："+ins);
			//});
			
			
			//点击按钮--下面两个span 改为3和4
			//$("button").click(function(){
			//	$("span").html("<span>lorem3</span><span>lorem4</span>");
			//});
			
			
			//js变量【int i=1】==jq变量      val 变量名=值、元素
			//无参数  html()    函数使用
		//	var html=$("span").html();
			//BOM方式，打印数据
		//	alert("无参数获取第一个元素的内容"+html);
		</script>
	</body>
</html>